<template>
  <div>
    <div class="videoClass">
      <video ref="playerId" class="video-js" :id="playerId"></video>
    </div>
    <div>
      <el-button @click="playClick">播放</el-button>
      <el-button @click="stopClick">暂停</el-button>
      <el-button @click="getCurFrame">逐帧播放</el-button>
      <el-button @click="stopCurFrame">逐帧暂停</el-button>
      <el-button @click="lastFrame">上一帧</el-button>
      <el-button @click="nextFrame">下一帧</el-button>
      <el-button @click="getVideoInfo">获取帧信息</el-button>
    </div>
    <div>
      {{ `播放模式：${playMode}` }}
    </div>
    <div>
      {{ `帧率：${fps}` }}
    </div>
    <div>
      {{ `当前帧：${curFrmeCount}` }}
    </div>
    <div>
      {{ `总帧数${totalFrame}` }}
    </div>
  </div>
</template>
<script setup lang="ts">
import { onActivated, ref, reactive, nextTick } from 'vue';
import videojs from 'video.js';

let playerId = 'playerId';

let intervalId;
let videoInfo = reactive({});
let fps = ref(0);
let totalFrame = ref(0);
let curFrmeCount = ref(0);
let playMode = ref('正常播放');

const getVideoInfo = async () => {
  videoInfo = await window.api.getVideoOrAudioMetaDataPromise('D:\\6.mp4');

  if (videoInfo.streams) {
    videoInfo.streams.forEach((item) => {
      if (item.codec_type == 'video') {
        let frameList = item.avg_frame_rate.split('/');
        fps.value = parseInt((frameList[0] / frameList[1]).toFixed(0));
        totalFrame.value = item.nb_frames;
      }
    });
  }
  curFrmeCount.value = 0;
};

let player;
onActivated(async () => {
  await nextTick();
  getVideoInfo();
  player = videojs(playerId, {
    autoplay: true,
    controls: true,
    loop: true,
    controlBar: {
      playToggle: false,
      progressControl: true,
    },
    sources: [
      {
        src: `D:\\6.mp4`,
        type: 'video/mp4',
      },
    ],
  });

  player.on('timeupdate', () => {
    if (playMode.value == '正常播放') {
      let currentTime = player.currentTime();
      curFrmeCount.value = parseInt(((currentTime * totalFrame.value) / player.duration()).toFixed(0)); //计算当前帧
    }
  });
});

const getCurFrame = () => {
  player.play();
  player.currentTime(0);
  playMode.value = '按帧播放';
  let frm = 1000 / fps.value;
  console.log(frm);
  let tims = new Date().getTime();
  intervalId = setInterval(() => {
    console.log(new Date().getTime() - tims);
    tims = new Date().getTime();
    playNextFrame(1);
  }, frm);
};

const nextFrame = () => {
  playNextFrame(1);
};

const lastFrame = () => {
  playNextFrame(-1);
};

const playNextFrame = (index) => {
  curFrmeCount.value = curFrmeCount.value + index;
  if (curFrmeCount.value > totalFrame.value) {
    curFrmeCount.value = 0;
  } else if (curFrmeCount.value < 0) {
    curFrmeCount.value = totalFrame.value;
  }
  let nextFrameTime = (curFrmeCount.value * player.duration()) / totalFrame.value;
  player.currentTime(nextFrameTime);
};

const playClick = () => {
  playMode.value = '正常播放';
  player.play();
};

const stopCurFrame = () => {
  player.pause();
  clearInterval(intervalId);
};

const stopClick = () => {
  player.pause();
};
</script>

<style lang="less">
.videoClass {
  height: 400px;
}
.video-js {
  width: 100%;
  height: 100%;
}
</style>
